<template>
  <div class="drawer">
    <el-drawer
      size="36%"
      class="drawer_two"
      :append-to-body="true"
      :visible="isShow"
      :show-close="false"
      :before-close="handleClose"
    >
      <!-- <template slot="title"><i @click="handleLast" class="el-icon-arrow-left" style="font-size: 14px; color: #000; cursor: pointer">返回主页</i></template> -->
      <div class="two_content">
        <div class="two_icon">
          <img :src="src" alt="" />
          <p class="title">{{ title }}</p>
        </div>
        <!-- 表单 -->
        <div class="form">
          <el-form
            ref="form"
            label-width="126px"
            :model="formData"
            :rules="rules"
          >
            <el-form-item label="发货人地址：">
              <el-cascader
                ref="area"
                style="width: 260px"
                v-model="area"
                :options="shipperAddressList"
                clearable
                placeholder="请输选择省市区"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址:" prop="adressRequest.details">
              <el-input
                v-model="formData.adressRequest.details"
                style="width: 260px"
                placeholder="请输入详细地址"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="邮政编码:" prop="adressRequest.zipCode">
              <el-input
                v-model="formData.adressRequest.zipCode"
                style="width: 260px"
                clearable
                placeholder="请输入邮政编码"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="公司名称"
              prop="userCompanyRequest.companyName"
            >
              <el-input
                v-model="formData.userCompanyRequest.companyName"
                style="width: 260px"
                clearable
                placeholder="请输入公司名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="公司地址"
              prop="userCompanyRequest.companyAddress"
            >
              <el-input
                v-model="formData.userCompanyRequest.companyAddress"
                style="width: 260px"
                clearable
                placeholder="请输入公司地址"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="公司电话"
              prop="userCompanyRequest.companyPhone"
            >
              <el-input
                v-model="formData.userCompanyRequest.companyPhone"
                style="width: 260px"
                clearable
                placeholder="请输入公司电话"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-show="data.mallInfoRequest.type === 2"
              label="营业执照号:"
              prop="userCompanyRequest.businessLicense"
            >
              <el-input
                v-model="formData.userCompanyRequest.businessLicense"
                style="width: 260px"
                clearable
                placeholder="请输入营业执照号"
              ></el-input>
            </el-form-item>
            <!--营业期限-->
            <el-form-item
              label="营业期限:"
              prop="userCompanyRequest.businessTerm"
            >
              <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 260px"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                clearable
                @change="changeDate"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-row class="Ibtn">
                <el-button class="el_btn" @click="handleLast">上一步</el-button>
                <span>|</span>
                <el-button class="el_btn" @click="handleNext">下一步</el-button>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-drawer>
    <!-- 抽屉 -->
    <ThreeDrwawer
      :data="formData"
      :title="title"
      :src="src"
      @handleLast="Last"
      :show="show"
    ></ThreeDrwawer>
  </div>
</template>

<script>
import ThreeDrwawer from './threeDrwawer'
import cityData from './area.json'

export default {
  /* 注册组件 */
  components: {
    ThreeDrwawer
  },
  /* 接受父组件传过来的数据 */
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    src: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  /* 数据 */
  data() {
    return {
      date: '',
      area: [],
      show: false,
      shipperAddressList: cityData,
      formData: {
        // 店铺状态
        userCompanyRequest: {
          companyName: '',
          businessLicense: '',
          businessTermStart: '',
          businessTermEnd: '',
          companyPhone: '',
          companyAddress: ''
        },
        // 寄件人
        adressRequest: {
          // 寄件人省份
          provice: '',
          // 城市
          city: '',
          // 区县
          county: '',
          // 详细地址
          details: '',
          // 邮政编码
          zipCode: ''
        },
        // 收件人
        receivingAddressRequest: {
          provice: '',
          // 城市
          city: '',
          // 区县
          county: '',
          // 详细地址
          details: '',
          // 邮政编码
          zipCode: ''
        }
      },
      rules: {
        adressRequest: {
          details: [
            { required: true, message: '请输入详细地址', trigger: 'blur' }
          ],
          zipCode: [
            { required: true, message: '请输入邮政编码', trigger: 'blur' }
          ]
        },
        userCompanyRequest: {
          companyName: [
            { required: true, message: '请输入公司名称', trigger: 'blur' }
          ],
          companyAddress: [
            { required: true, message: '请输入公司地址', trigger: 'blur' }
          ],
          companyPhone: [
            { required: true, message: '请输入公司电话', trigger: 'blur' }
          ],
          businessLicense: [
            { required: true, message: '请输入营业执照号', trigger: 'blur' }
          ]
        }
      }
    }
  },

  /* 计算属性 */
  computed: {},

  /* 监听器 */
  watch: {},

  /* 初始化阶段 */
  created() {},

  /* 挂载阶段 */
  mounted() {},

  /* 销毁 */
  destroyed() {},

  /* 方法 */
  methods: {
    handleClose(done) {
      done()
    },
    // 上一步
    handleLast() {
      this.$emit('handleLast', this.formData)
    },
    // 下一步
    handleNext() {
      if (this.data.mallInfoRequest.type === 1) {
        // 删除营业执照号
        delete this.rules.userCompanyRequest.businessLicense
      }
      if (this.area.length === 0 || this.date.length === 0) return
      // 获取省市区
      const res = this.$refs['area'].getCheckedNodes()[0].pathLabels
      this.formData.adressRequest.provice = res[0]
      this.formData.adressRequest.city = res[1]
      this.formData.adressRequest.county = res[2]
      // 验证表单
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.formData.receivingAddressRequest = {
            ...this.formData.adressRequest
          }
          this.formData = { ...this.formData, ...this.data }
          this.show = true
        }
      })
    },
    Last() {
      this.show = false
    },
    changeDate(val) {
      this.formData.userCompanyRequest.businessTermStart = val[0]
      this.formData.userCompanyRequest.businessTermEnd = val[1]
      console.log(
        'this.formData.userCompanyRequest: ',
        this.formData.userCompanyRequest
      )
    }
  }
}
</script>

<style scoped lang="scss">
.drawer_two {
  .two_content {
    .two_icon {
      * {
        margin: 0;
        padding: 0;
      }

      margin-top: 15px;
      text-align: center;
    }

    p {
      font-weight: 700;
      font-size: 28px;
      color: #000;
    }
  }

  .form {
    width: 495px;
    margin: 67px auto 0;

    .Ibtn {
      width: 230px;
      height: 45px;
      line-height: 45px;
      border-radius: 22.5px;
      background: #1289ff;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .el_btn {
        height: 29px;
        margin: 0;
        padding: 0;
        background: #1289ff;
        border: 0;
        font-weight: 400;
        font-size: 20px;
        text-align: center;
        color: #fff;
      }

      span {
        display: inline-block;
        //height: 18px;
        color: #fff;
        font-size: 24px;
      }
    }
  }
}
</style>
